<template>
    <div>
        <el-button style="margin-bottom: 10px; float:right;right:10px;" type="success" icon="el-icon-plus" @click="showEditRow(1)"></el-button>
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="name"
                        label="任务名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="clazz"
                        label="执行类"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="cron"
                        label="定时表达式"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="100">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status"
                                   :active-value="1"
                                   :inactive-value="2"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   @change=changStatus(scope.row)
                        ></el-switch>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="des"
                        label="描述"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="updateTime"
                        label="更新时间"
                        width="200">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="showMore(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="showEditRow(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <el-dialog
                :before-close="closeUpdateOrAdd"
                title="提示"
                :visible.sync="dialogVisibleShowEdit"
                width="30%">
            <el-form label-width="80px">
                <el-form-item label="任务名*">
                    <el-input v-model="updateSchedule.name"></el-input>
                </el-form-item>
                <el-form-item label="执行类*">
                    <el-input v-model="updateSchedule.clazz"></el-input>
                </el-form-item>
                <el-form-item label="表达式*">
                    <el-input placeholder="* * * * * ?" v-model="updateSchedule.cron" ></el-input>
                </el-form-item>
                <el-divider content-position="left">
                <el-link type="info">https://cron.qqe2.com/</el-link>
                </el-divider>
                <el-form-item label="状态*">
                    <el-switch
                            v-model="updateSchedule.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="2">
                    </el-switch>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="updateSchedule.des"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeUpdateOrAdd">取 消</el-button>
                <el-button type="primary" @click="editRow">确 定</el-button>
              </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisibleShowEdit: false, // 控制定时任务弹出框
                tableData: [],
                updateSchedule: {
                    name: '',
                    clazz: '',
                    cron: '',
                    status: '',
                    des: '',
                }
            }
        },
        mounted() {
            this.init(); // 初始化定时任务列表
        },
        methods: {
            closeUpdateOrAdd(){
                this.dialogVisibleShowEdit = false;
                this.updateSchedule={}
            },
            showMore(row) {
                console.log(row);
            },
            showEditRow(row){
                if(row==1){ // 执行添加

                }else{// 执行更新
                    this.updateSchedule.id = row.id;
                    this.updateSchedule.name = row.name;
                    this.updateSchedule.clazz = row.clazz;
                    this.updateSchedule.cron = row.cron;
                    this.updateSchedule.status = row.status;
                    this.updateSchedule.des = row.des;
                }

                this.dialogVisibleShowEdit = true;
            },
            editRow() { // 用于修改当前行数据信息以及定时任务开关
                this.dialogVisibleShowEdit = false;
                if(this.updateSchedule.id!=null){
                    this.postRequest('/schedule/update', this.updateSchedule).then(resp => {
                        if (resp) {
                            this.init();
                        }
                    })
                }else{
                    this.postRequest('/schedule/addJob', this.updateSchedule).then(resp => {
                        if (resp) {
                            this.init();
                        }
                    })
                }

            },
            init() { // 查询所有定时任务
                this.getRequest('/schedule/list').then(resp => {
                    if (resp) {
                        this.tableData = resp.data.list;
                    }
                })
            },
            changStatus(row) { // 修改定时任务开关
                this.postRequest('/schedule/update', row).then(resp => {
                    if (resp) {
                        this.init();
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>